<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card-head">
        <div class="head">
          <div class="inp">
            <div class="text">关键字</div>
            <el-input
              placeholder="根据编号搜索"
              v-model="page.keyword"
            ></el-input>
          </div>
          <div id="btns">
            <template>
              <el-button plain @click="clear">清除</el-button>
              <el-button type="primary" @click="getKeyQuestions"
                >搜索</el-button
              >
            </template>
          </div>
        </div>
        <div class="alert">
          <el-alert type="info" show-icon>
            <span>数据一共{{ total }}条</span>
          </el-alert>
        </div>
        <div class="el-table">
          <el-table style="width: 100%" :data="list">
            <el-table-column label="编号" width="200" prop="id">
            </el-table-column>
            <el-table-column
              label="题型"
              width="100"
              prop="questionType"
              :formatter="formatType"
            >
            </el-table-column>
            <el-table-column label="题目编号" width="200" prop="questionIDs">
              <template slot-scope="{ row }">
                <div v-for="(item, index) in row.questionIDs" :key="index" >
                  <el-button type="text" size="small" @click="getQuestionsInfo(item.id)">{{
                    item.number
                  }}</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180" prop="addTime">
            </el-table-column>
            <el-table-column
              label="答题时间(s)"
              width="180"
              prop="totalSeconds"
            >
            </el-table-column>
            <el-table-column label="正确率(%)" width="180" prop="accuracyRate">
            </el-table-column>
            <el-table-column label="录入人" width="180" prop="userName">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="{ row }">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="del(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            layout="prev, pager, next, jumper"
            :page-size="page.size"
            :total="total"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </el-card>
      <Dialog  :showDialog.sync="showDialog" :questionData="questionData"></Dialog>
    </div>
  </div>
</template>

<script>
import { getQuestionsList, deleteQuestions, getQuestionsInfo } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import Dialog from '../components/questions-preview1.vue'
export default {
  name: 'QuestionPage',
  components: {
    Dialog
  },
  props: {},
  data () {
    return {
      total: 0,
      page: {
        page: 1,
        size: 10,

        keyword: ''
      },
      list: [],
      showDialog: false,
      questionData: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getQuestions()
  },
  mounted () {},
  methods: {
    changePage (newPage) {
      this.page.page = newPage
      this.getQuestions()
    },
    // 获取数据，渲染页面
    async getQuestions () {
      const { data } = await getQuestionsList(this.page)
      this.total = data.counts

      this.list = data.items
      // console.log(this.list)
    },
    // 删除功能
    async del (data) {
      await this.$confirm('确定要删除此数据？')
      // console.log(id)
      await deleteQuestions(data)
      this.getQuestions()
      this.$message.success('删除成功')
    },
    // 搜索功能
    async getKeyQuestions () {
      const { data } = await getQuestionsList(this.page)
      this.list = data.items
      this.total = data.counts
      this.$message.success('搜索成功')
    },
    clear () {
      this.page.keyword = ''
      this.getQuestions()
    },
    // 题型格式化
    formatType (row, column, cellValue, index) {
      const obj = questionType.find((item) => {
        return item.value === +cellValue
      })
      return obj === undefined ? '未知' : obj.label
      // console.log(cellValue)
    },
    async getQuestionsInfo (id) {
      this.showDialog = true
      const { data } = await getQuestionsInfo(id)
      // console.log(data)
      this.questionData = data
    }
  }
}
</script>

<style scoped >
.head {
  display: flex;
  justify-content: space-between;
}
.inp {
  display: flex;
  align-items: center;
  font-size: 16px;
}
.text {
  width: 80px;
}
.alert {
  margin-top: 20px;
  align-items: center;
}
.alert span {
  font-size: 16px;
}
.el-table {
  margin-top: 10px;
}
.block {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
</style>